<template>
    <div :class="`title ${backrgoundSize}`">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
interface Props {
    backrgoundSize?: 'large' | 'default' | 'small'
}
defineProps<Props>()
</script>

<style lang="scss" scoped>
.title {
    height: 39px;
    line-height: 39px;
    text-align: center;
    font-size: 16px;
    text-shadow: #fff 0 0 10px;
    background-size: cover;

    &.small {
        width: 127px;
        background: url('../../../images/title-box-1.png') no-repeat;
    }

    &.default {
        width: 143px;
        background: url('../../../images/title-box-2.png') no-repeat;
    }

    &.large {
        width: 152px;
        background: url('../../../images/title-box-3.png') no-repeat;
    }
}
</style>
